<template>
  <div id="assetsMarkTwo">
      <el-form :model="assetsMarkTwoForm" label-width="120px" class="assetsMarkOne-form">
          <h3>借款人信息</h3>
          <el-form-item label="借款人姓名" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkTwoForm.realName" :disabled="true"></el-input>
          </el-form-item >

          <el-form-item label="身份证号码" required>
              <el-input class="assetsMarkOne-input" :value="assetsMarkTwoForm.idcard" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="性别" required>
              <el-input class="assetsMarkOne-input" :value="assetsMarkTwoForm.sex" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="户籍" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkTwoForm.familyRegister" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="最高学历" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkTwoForm.education" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="婚姻状况" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkTwoForm.marryStatus" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="年收入" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkTwoForm.annualIncome" :disabled="true">
                  <template slot="append">元</template>
              </el-input>
          </el-form-item>

          <el-form-item label="汽车状况" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkTwoForm.carStatus" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="住房状况" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkTwoForm.houseStatus" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="个人月收入" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkTwoForm.personalIncome" :disabled="true">
                  <template slot="append">元</template>
              </el-input>
          </el-form-item>

          <el-form-item label="家庭月收入" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkTwoForm.familyIncome" :disabled="true">
                  <template slot="append">元</template>
              </el-input>
          </el-form-item>

          <el-form-item label="工作城市" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkTwoForm.workCity" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="工作年限" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkTwoForm.workExperience" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="目前工作单位" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkTwoForm.workCompany" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="目前公司规模" required>
              <el-input class="assetsMarkOne-input" v-model="assetsMarkTwoForm.workCompanyPeople" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item>
              <el-button type="primary" @click="back()">上一步</el-button>
              <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>

<script>
    import { getLoanProjectInfo, createLoanProject } from "@/api/api";
    export default {
        name: "assetsMarkTwo",
        data () {
            return {
                assetsMarkTwoForm: {}
            };
        },
        watch: {
            $route (to) {
                if(to.name === "assetsMarkTwo") {
                    this.LoanProject();
                }
            }
        },
        mounted () {
            this.$nextTick(() => {
                this.LoanProject();
            });
        },
        methods: {
            async LoanProject () {
                let _this = this;
                await getLoanProjectInfo({
                    "loanNo": this.$route.query.loanNo
                }).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    _this.assetsMarkTwoForm = Data;
                });
            },
            back () {
                this.$router.go(-1);
            },
            async onSubmit () {
                let _this = this;
                if (window.sessionStorage["createLoan"]) {
                    let createLoanInfo = JSON.parse(window.sessionStorage.getItem("createLoan"));
                    this.createLoan = createLoanInfo;
                }
                await createLoanProject(this.createLoan).then((res) => {
                    if (res.data.state.code === "200") {
                        window.sessionStorage.removeItem("createLoan");
                        _this.$message({
                            message: "成功",
                            type: 'success'
                        });
                        this.$router.push({path: "/asset"});
                    } else {
                        _this.$message({
                            message: res.data.state.message,
                            type: 'error'
                        });
                    }
                });
            }
        }
    };
</script>

<style lang="scss">
  #assetsMarkTwo{
      border: 1px solid #eee;
      margin:20px;
      padding:22px 0 0 20px;
      min-width: 1200px;
      box-sizing: border-box;
      overflow: hidden;
      .assetsMarkOne-form{
          overflow: hidden;
          h3{
              width: 100px;
              text-align: right;
              margin-bottom: 40px;
          }
          h3:nth-of-type(2){
              margin-top: 50px;
          }
          .assetsMarkOne-input{
              width: 500px;
          }
          .assetsMarkOne-input-tips{
              margin-left: 20px;
              color: #ccc;
          }
          .form-item-span{
              overflow: hidden;
              .form-item-input{
                  width: 200px;
              }

              .one{
                  float: left;
              }
              .two{
                  float: left;
              }
          }
      }
  }
</style>
